<template>
  <div class="scenario">
    <div class="title">{{ scenario.scenarioName }}</div>
    <!-- 未完成 -->
    <template v-for="(action, index) in scenario.scenarioInfo">
      <template v-if="index > lastActionIndex">
        <div style="margin-top: 11px; background-color: #FAFAFA; padding: 20px;" :key="action.actionName">
          <img :src="require('@/assets/loading.png')" width="19" height="19" style="margin-right: 2vw">
          <span>{{ index + 1 }}、{{ action.actionName }}</span>
          <span v-if="index == lastActionIndex + 1 && action.actionType == '普通'" style="float: right; color: #015FE2;"
            @click="cilckEdit">去执行</span>
          <span v-else-if="index == lastActionIndex + 1 && action.actionType == '签到'"
            style="float: right; color: #015FE2;" @click="cilckEdit">去签到</span>
          <span v-else-if="index == lastActionIndex + 1 && action.actionType == '签退'"
            style="float: right; color: #015FE2;" @click="cilckEdit">去签退</span>
          <span v-else style="float: right; color: gray;">待执行</span>
        </div>
      </template>
    </template>
    <!-- 已完成 -->
    <template v-for="(action, index) in scenario.scenarioInfo">
      <template v-if="index <= lastActionIndex">
        <div :key="action.actionName + '1'">
          <div class="L-card-title-row">
            <div>
              <b>动作：</b><span style="color: #FF9100;">{{ action.actionName }}</span>
            </div>
            <div>
              <span style="float: right;" v-if="action.states == 'end'"
                @click="clickEnded(action, true, index)">已完成</span>
              <span style="float: right;" v-else-if="action.states == 'skip'"
                @click="clickEnded(action, true, index)">已跳过</span>
            </div>

          </div>
          <div>
            <div style="" v-if="action.ended">
              <div v-for="(lField, index) in action.lFields" :key="'fields' + index"
                :style="index == 0 ? '' : 'margin-top: 10px;'">
                <div v-for="item in lField" :key="item.groupStitle"
                  style="background-color: #F6F6F6; padding: 10px;margin-bottom:15px">
                  <div v-for="fieldvalue in item.groupvalue" :key="fieldvalue.id">
                    <!-- {{fieldvalue.sUIType}} -->

                    <div v-if="action.fields.indexOf(fieldvalue.sField) >= 0">
                      <div style="color:#999;font-size:16px;line-height:30px;padding:5px;background:#fff"
                        v-if="fieldvalue.sUIType == 'file'">
                        <div :class="{ field_prompt: fieldvalue.snote }">
                          <span class="custom-title">{{ fieldvalue.sTitle }}</span>
                          <van-icon v-if="fieldvalue.snote && fieldvalue.snote !== ''" name="info-o"
                            @click="iconClick(fieldvalue.snote)" />
                        </div>
                        <template v-for="filevalue in fieldvalue.valuelist">
                          <div :key="filevalue.url">
                            <a :href="filevalue.url">{{ filevalue.file.name }}</a>
                          </div>
                        </template>
                      </div>
                      <div style="color:#999;font-size:16px;line-height:30px;padding:5px 15px;background:#fff"
                        v-else-if="fieldvalue.sUIType == 'picture'">
                        <div>
                          <span class="custom-title">{{ fieldvalue.sTitle }}</span>
                          <van-icon v-if="fieldvalue.snote && fieldvalue.snote !== ''" name="info-o"
                            @click="iconClick(fieldvalue.snote)" />
                        </div>
                        <van-uploader v-model="fieldvalue.valuelist" disabled max-count="0" :deletable="false">
                        </van-uploader>
                      </div>

                      <div style="color:#999;font-size:16px;line-height:30px;padding:5px 15px;background:#fff"
                        v-else-if="fieldvalue.sUIType == 'string' && fieldvalue.sFormat == 'star'">
                        <!-- <template v-else-if="fieldvalue.sUIType == 'string' && fieldvalue.sFormat == 'star'"> -->
                        <van-row type="flex" align="center" justify="space-between"
                          style="margin-top:10px;background:#fff">
                          <van-col style="font-size:16px;">{{ fieldvalue.sTitle }}</van-col>
                          <van-col>
                            <van-rate v-model="fieldvalue.value" :size="25" color="#ffd21e" void-icon="star"
                              void-color="#eee" readonly />
                          </van-col>
                        </van-row>

                        <!-- <van-cell :title="fieldvalue.sTitle">
                          <template #title>
                            <span class="custom-title">{{ fieldvalue.sTitle }}</span>
                            <van-icon v-if="fieldvalue.snote && fieldvalue.snote !== ''" name="info-o" @click="iconClick(fieldvalue.snote)" />
                          </template>
                          <template #default>
                            <van-rate v-model="fieldvalue.value" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" readonly />
                          </template>
                        </van-cell> -->
                        <!-- </template> -->
                      </div>
                      <template v-else-if="fieldvalue.sUIType == 'extract'">
                        <van-cell :title="fieldvalue.sTitle" :value="fieldvalue.value"
                          @click="targetList(fieldvalue)"></van-cell>
                      </template>
                      <template v-else>
                        <div>
                          <!-- <div style="background:#fff;padding:5px 15px;box-sizing:border-box"> -->
                          <!-- <div class="L-field-row">
                            <div class="field-lable">
                              {{ fieldvalue.sTitle }}
                              <van-icon v-if="fieldvalue.snote && fieldvalue.snote !== ''" name="info-o" @click="iconClick(fieldvalue.snote)" />
                            </div>
                            <div class="field-content">{{fieldvalue.value}}</div>
                          </div> -->
                          <van-cell class="cellvalue1" :title="fieldvalue.sTitle">
                            <template #title>
                              <span class="custom-title">{{ fieldvalue.sTitle }}</span>
                              <van-icon v-if="fieldvalue.snote && fieldvalue.snote !== ''" name="info-o"
                                @click="iconClick(fieldvalue.snote)" />
                            </template>
                            <template #default>
                              <span class="valueleft" v-html="fieldvalue.value"></span>
                            </template>
                          </van-cell>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>
<script>
import Vue from 'vue'
import { Search, List, Cell, PullRefresh, Toast, Tabbar, TabbarItem, Popup, DatetimePicker, ActionSheet, Tab, Tabs, Collapse, CollapseItem, Dialog, Uploader, Rate, Icon, Form, Sticky, Image, Loading, Step, Steps } from 'vant'
import qs from 'qs'

Vue.use(Search).use(List).use(Cell).use(PullRefresh).use(Toast).use(Tabbar).use(TabbarItem).use(Popup).use(DatetimePicker).use(ActionSheet).use(Tab).use(Tabs).use(Collapse).use(CollapseItem).use(Dialog).use(Uploader).use(Rate).use(Icon).use(Form).use(Sticky).use(Image).use(Loading).use(Step).use(Steps)
export default {
  name: 'scenario',
  data() {
    return {
      scenario: {},
      lastActionIndex: -1
    }
  },
  props: ['idobject', 'cardid', 'isqd','jsondataDetails'],
  mounted: function () {
    //console.log('scenario id', this.idobject, this.cardid)
    this.axios({
      method: 'post',
      url: '/api/scenario.getinfo.do',
      data: qs.stringify({
        sobject: this.idobject,
        cardid: this.cardid
      })
    }).then(res => {
      //console.log('scenario res', res)
      this.scenario = res.data.scenario
      //console.log('scenario', this.scenario)

      this.lastActionIndex = this.scenario.scenarioInfo.length
      // 找到上一次执行最后一个未完成的
      for (let i = 0; i < this.scenario.scenarioInfo.length; i++) {
        if (!this.scenario.scenarioInfo[i].ended) {
          this.lastActionIndex = i - 1
          break
        }
      }
      //console.log(this.lastActionIndex, this.isqd)
      /* if (this.isqd) {
          this.cilckEdit()
      } */
    })
  },
  methods: {
    cilckEdit() {
      Toast.loading({
        message: '执行中...',
        forbidClick: true,
        duration:1000
      });

      /* if (type == 'new') {
          this.$router.push({ name: 'new', query: { idobject: bo } })
      } else if (type == 'edit') {
          this.$router.push({ name: 'edit', query: { itemid: id, idobject: bo } })
      } */
      let lastAction = this.scenario.scenarioInfo[this.lastActionIndex + 1]
      // console.log("lastAction",lastAction)
      // return 
      this.clickEnded(lastAction, false, this.lastActionIndex + 1)
      // action.toId, action.toBo, action.toPage, action.actionName, action.fields
      /* localStorage.setItem('scenarioData', JSON.stringify(this.scenario))
      this.$router.push({
        name: 'action',
        query: {
          scenarioId: this.scenario.scenarioId,
          actionId: lastAction.actionId,
          itemid: lastAction.toId,
          headobject: this.idobject,
          headid: this.cardid,
          idobject: lastAction.toBo,
          atype: lastAction.toPage,
          stitle: lastAction.actionName,
          fields: lastAction.fields,
          canskip: lastAction.canskip,
          ended: false,
          // scenario: JSON.stringify(this.scenario),
          lastActionIndex: this.lastActionIndex + 1,
          actionType: lastAction.actionType
        }
      }) */
    },
    clickEnded(lastAction, ended, nowIndex) {
      let emcontacttype
      this.jsondataDetails.forEach(i => {
        i.groupvalue?.forEach(i2 => {
          if (i2.sField == 'emcontacttype') {
            emcontacttype = i2.value
          }
        })
      });
      console.log(emcontacttype,8989)
      localStorage.setItem('scenarioData', JSON.stringify(this.scenario))
      this.$router.push({
        path: '/action',
        query: {
          emcontacttype: emcontacttype || '',
          stitle: lastAction.actionName,
          scenarioId: this.scenario.scenarioId,
          actionId: lastAction.actionId,
          itemid: lastAction.toId,
          headobject: this.idobject,
          headid: this.cardid,
          idobject: lastAction.toBo,
          atype: lastAction.toPage,
          fields: lastAction.fields,
          canskip: lastAction.canskip,
          ended: ended,
          // scenario: JSON.stringify(this.scenario),
          nowIndex: nowIndex,
          lastActionIndex: this.lastActionIndex + 1,
          actionType: lastAction.actionType
        }
      })
    }
  }
}
</script>
<style>
.L-field-row {
  display: flex;
  justify-content: flex-start;
  line-height: 26px;
  align-items: flex-start;
  background: #fff;
}

.L-field-row .field-lable {
  flex-basis: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
  flex-grow: 0;
  /* color: #909399; */
}

.L-field-row .field-content {
  flex-shrink: 1;
  flex-grow: 1;
}

.L-card-title-row {
  width: 100%;
  margin: 15px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 5px solid #5790df;
  box-sizing: border-box;
  padding-left: 10px;
}

.scenario {
  padding: 20px;
}

.scenario .title {
  font-weight: 700;
}
</style>
